{extend name="public/base" /}
{block name="css"}
<style>
  .main-container {
    background: #F5F5F5;
    text-align: center;
  }

  .content > div {
    padding: 20px 15px 0px;
  }

  .item {
    background: rgba(255,255,255,1);
    box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    margin-bottom: 18px;
  }

  .item > img {
    width: 100%;
    border-radius: 2px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  .item > div {
    display: flex;
    text-align: left;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 15px 15px 8px;
  }

  .item > div > p {
    width: 100%;
    text-align: left;
    color: #333333;
    font-size: 18px;
  }

  .item > div > img {
    width: 20px;
    height: 20px;
  }

  .item > div > .case-title {
    font-size: 18px;
    color: #333333;
  }

  .item > div > .case-info {
    font-size: 14px;
    color: #93412C;
    padding-bottom: 10px;
    border-bottom: 1px solid #E6E6E6;
  }

  .item > .end-time {
    display: flex;
    flex-direction: row;
    padding: 0 15px;
    font-size: 14px;
    justify-content: space-between;
  }

  .item > .end-time > span {
    font-size: 14px;
    color: #555;
  }

  .item > .end-time > span:last-child {
    color: #93412C;
  }

  .item > .action {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding-bottom: 18px;
  }

  .item > .action > button:nth-child(1) {
    font-size: 14px;
    color: #93412C;
    background: transparent;
    border: 1px #93412C solid;
    padding: 3px 10px;
    border-radius: 5px;
  }

  .item > .action > button:nth-child(2) {
    font-size: 14px;
    color: #fff;
    background: #93412C;
    border: 1px #93412C solid;
    padding: 3px 10px;
    border-radius: 5px;
    margin-left: 20px;
  }

</style>
{/block}
{block name="main"}
<section class="container-fluid main-container">
  <div class="content">
    <div>
      {volist name='list' id='item'}
      <div class="item">
        <img alt="" loading="lazy" src="{$item.cover}" />
        <div>
          <p class="case-title">{$item.building}</p>
          <p class="case-info">已报名{$item.enrolled}户，已签约{$item.signed}户，软装方案{$item.plan}套</p>
        </div>
        <div class="end-time">
          <span>距离结束</span>
          <span class="endTime" date="{$item.endTime}"></span>
        </div>
        <div class="action">
          <button onclick="showAppointmentLayer()">查看软装方案 ></button>
          <button onclick="showAppointmentLayer()">立即参团 ></button>
        </div>
      </div>
      {/volist}
    </div>
  </div>
</section>
{/block}
{block name="js"}
{load href="https://ujia-res.oss-cn-shenzhen.aliyuncs.com/common/third-party/echo/1.4.0/echo.js" /}
<script>
    $('#nav').find('ul > li').eq(4).addClass('nav-active');
    $("#nav").scrollLeft(65*4);

    Echo.init({
        offset: 0,
        throttle: 0
    });

    $('.endTime').each(function () {
        const timeEle = $(this);
        const date = $(this).attr("date");
        timeDown(timeEle, date);
    });

    /*
    时间倒计时插件
    */
    function timeDown(e, endDateStr) {
        const formatDate = endDateStr.replace(/-/g, '/');
        //结束时间
        const endDate = new Date(formatDate);
        //当前时间
        const nowDate = new Date();
        //相差的总秒数
        const totalSeconds = parseInt((endDate - nowDate) / 1000);
        //天数
        const days = Math.floor(totalSeconds / (60 * 60 * 24));
        //取模（余数）
        let modulo = totalSeconds % (60 * 60 * 24);
        //小时数
        const hours = Math.floor(modulo / (60 * 60));
        modulo = modulo % (60 * 60);
        //分钟
        const minutes = Math.floor(modulo / 60);
        //秒
        const seconds = modulo % 60;

        let d = days;
        if(days < 10){
            d = `0${days}`;
        }

        let h = hours;
        if(hours < 10){
            h = `0${hours}`;
        }

        let m = minutes;
        if(minutes < 10){
            m = `0${minutes}`;
        }

        let s = seconds;
        if(seconds < 10){
            s = `0${seconds}`;
        }

        //输出到页面
        e.html(`${d}天${h}时${m}分${s}秒`);


        //延迟一秒执行自己
        setTimeout(function () {
            timeDown(e, endDateStr);
        }, 1000)
    }
</script>
{/block}